<template>
  <div class="monitor-home" style="height:calc(100vh - 64px)">
    <div v-if="!monitorData.isLoadPlayer">
      <!-- <Form class="monitor-form" :model="formInfo" :label-width="300" inline>
        <FormItem label="选择站点:" :label-width="160">
          <Select v-model="formInfo.station" :label-width="160" @on-change="changeStation(formInfo)">
            <Option v-for="item in stationList" :value="item.value" :key="item.value">
              {{ item.label }}
            </Option>
          </Select>
        </FormItem>
      </Form> -->
      <video-grid></video-grid>
    </div>
    <video-player-detail v-else></video-player-detail>

    <!-- 错误提示框 -->
    <Modal v-model="showError" draggable width="500" :styles="{top: '30vh'}">
      <p slot="header" style="height:40px;line-height:40px;color:#f60;text-align:center;font-size:30px;">
        <Icon type="ios-information-circle"></Icon>
        <span>提示</span>
      </p>
      <div style="text-align:center;font-size:24px;height:60px;line-height:60px;">
        <p>当前站点的视频流不可用，请尝试其他站点</p>
      </div>
      <div slot="footer">
        <Button style="font-size:24px;"
        type="error" size="large" long @click="updateVideoStreamState">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import constData from "@/util/constData"
import {mapState, mapGetters, mapActions} from 'vuex'

import VideoGrid from './videoGrid'
import VideoPlayerDetail from './videoPlayerDetail'

export default {
  components: {
    VideoGrid,
    VideoPlayerDetail
  },
  data () {
    return {
      formInfo: {
        station: ''
      },
      showError: false,
      stationList: constData.stationList
    }
  },
  computed: {
    ...mapState([
      'monitorData',
      'videoPlayerState',
      'selectedStationData'
    ])
  },
  watch: {
    videoPlayerState: {
      deep: true,
      handler(value) {
        console.log(value)
        if(value.getStreamUrlState === 404) this.showError = true
        if(value.getStreamUrlState === 200) this.showError = false

      }
    }
  },
  mounted() {
    this.formInfo.station = this.selectedStationData.station
    let params = {
      station: this.formInfo.station
    }
    this.getStationVideoStreamUrl(params)
  },
  methods: {
    ...mapActions([
      'getStationVideoStreamUrl',
      'updateGetStationVideoStreamState200'
    ]),
    changeStation(formInfo) {
      let params = {
        station: formInfo.station
      }
      this.getStationVideoStreamUrl(params)
    },
    updateVideoStreamState () {
      this.updateGetStationVideoStreamState200()
    }
  }
};
</script>

<style lang="less">
@background-color: #0a4271 !important;
@font-color: #fff !important;

.monitor-home {
  padding: 40px 40px;
  // background-color: #0a4271;
  background: url("../../assets/bg.jpg") center;
  /* box-sizing: border-box; */
}
.monitor-form .ivu-form {
  font-size: 3rem !important;
}
.monitor-form .ivu-form-item-label {
  font-size: 3rem !important;
  color: @font-color;
  font-weight: bold;
}
.monitor-form .ivu-form-item-content {
  line-height: 50px;
}
.monitor-form .ivu-select-selected-value {
  font-size: 2.8rem !important;
  height: 42px !important;
  line-height: 42px !important;
  color: @font-color;
  font-weight: bold;
}
.monitor-form .ivu-select-selection {
  width: 180px;
  height: 42px !important;
  background-color: @background-color;
  border: 1px solid @background-color;
}
.monitor-form .ivu-select-dropdown {
  background-color: @background-color;
  max-height: 300px;
}
.monitor-form .ivu-select-item {
  color: @font-color;
  font-size: 2.2rem !important;
  font-weight: bold;
}
.monitor-form .ivu-select-item-selected,
.ivu-select-item-selected:hover {
  color: #52c41a !important;
}
.monitor-form .ivu-select-placeholder {
  font-size: 2.8rem !important;
  height: 42px !important;
  line-height: 42px !important;
  font-weight: bold;
}
.ivu-select-item-focus {
  background-color: @background-color;
}
.ivu-select-item:hover {
  background-color: #1081b3 !important;
}
.vertical-center-modal{
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal{
    top: 0;
  }
}
</style>
